<template>
  <el-card>
    <el-form>
      <!-- 当前角色 -->
      <el-form-item style="width: 40%" label="角色名称">
        <el-input v-model="route.params.role_name" disabled></el-input>
      </el-form-item>
      <!--  -->
      <el-form-item>
         <el-tree 
          v-loading="treeLoading"
          empty-text=""
          :data="roleMenuList" 
          :props="defaultProps" 
          show-checkbox 
          :default-expand-all="true" 
          node-key="id"
          :default-checked-keys="selectIds"
          @check="checkChange"
        />
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="assignPermission()" :loading="loading">确定</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script lang="ts">
export default {
  name: 'RoleAuth'
}
</script>
<script lang="ts" setup>
import {ref, onMounted, computed} from 'vue'
// 引入消息提示组件
import {ElMessage, ElMessageBox} from 'element-plus'
// 引入角色权限相关的接口函数及类型
import {getMenuByRoleIdApi, assignPermissionApi} from '@/api/acl/permission'
import type {ResMenuListModel, MenuListModel, MenuInfoModel} from '@/api/acl/model/permissionModel'

// 引入路由相关Api
import {useRoute} from 'vue-router'
import {useRouter} from 'vue-router'

const route = useRoute() // 定义route变量
const router = useRouter() // 定义路由器对象
const roleMenuList = ref<MenuListModel>() // 定义角色的菜单列表数据
const treeLoading = ref<boolean>(false) // 定义开启载入效果标识
const loading = ref<boolean>(false) // 定义开启按钮载入效果标识
// 定义默认配置选项
const defaultProps = {
  children: 'children',
  label: 'name',
}
const allCheckedIds = ref<string>('') // 所有选中的id连成的字符串
// 定义存储属性值select为true的id数组
const selectIds = ref<string[]>([]) 
// 遍历数组并返回select属性为true的id数组
const filterPermissionListReturnIds = (permissionArry: MenuListModel) => {
  permissionArry.forEach(item => {
    if (item.select && item.level === 4) {
      selectIds.value.push(item.id as string)
    }
    if (item.children?.length) {
      filterPermissionListReturnIds(item.children)
    }
  })
}


// 根据id获取角色的菜单列表数据
const getRoleMenu = async () => {
  // 解构路径的params参数
  const {id} = route.params
  treeLoading.value = true
  const result = await getMenuByRoleIdApi(id as string)
  treeLoading.value = false
  // 更新数据
  roleMenuList.value = result.children
  filterPermissionListReturnIds(result.children)
}

// 点击节点复选框之后触发
const checkChange = (a: any, checkedObj: any) => {
  // 解构全选、半选keys 数组
  const {checkedKeys, halfCheckedKeys} = checkedObj
  // 更新数据
  allCheckedIds.value = [...halfCheckedKeys, ...checkedKeys].join() 
}
// 为角色分配权限
const assignPermission = async () => {
  try {
    loading.value = true
    await assignPermissionApi(route.params.id as string, allCheckedIds.value)
    ElMessage.success('分配权限成功')
  } catch (error: any) {
    ElMessage.warning(error.message)
  }
  loading.value = false
  router.push('/acl/role/list')
}

// 页面挂载完成
onMounted(() => {
  getRoleMenu()
})
</script>
<style scoped>
</style>